<template>
  <div class="ant-product-hot" v-if="data"  @click="$router.push({ path: '/pages/productInfo/productInfo', query: { goods_id: data.goods_id } }) ">
    <div class="product-hot-pic">
      <img :src="data.goods_logo" class="" mode="scaleToFill" />
    </div>
    <div class="product-hot-info">
      <p class="product-hot-name">{{data.goods_name}}</p>
      <p class="product-hot-body">
        <span class="product-hot-price">￥{{data.shop_price}}</span>
        <span class="product-hot-sales">销量{{data.sales_sum}}</span>
      </p>
    </div>
  </div>
</template>

<script>
  import {
    getDate
  } from '@/utils/index'
  export default {
    props: ['data'],
    computed: {

    }
    ,
    mounted() {
      console.log(this.data)
    },
  };

</script>

<style lang="less">
  .ant-product-hot {
    flex: 1;

    .product-hot-pic {
      background: #F9F9F9;
      img {
        width: 183px;
        height: 183px;
        display: block;
      }
    }

    .product-hot-info {
      padding: 10px 15px 10px;

      .product-hot-name {
        font-size: 12px;
        color: #333333;
        line-height: 1.5em;
        margin-bottom: 10px;
      }

      .product-hot-body {
        display: flex;
        align-items: flex-end;

        .product-hot-price {
          font-size: 14px;
          color: #EE7559;
          line-height: 1em;
        }

        .product-hot-sales {
          margin-left: 10px;
          font-size: 10px;
          color: #A0A0A0;
          line-height: 1em;
        }
      }
    }
  }

</style>
